import React, { Component } from 'react'
import { store } from '../store';
import {
    Text,  //文本组件
    View, //外层容器
    Dimensions,  //获取设备宽高
    ImageBackground, //背景图
    StatusBar,  //状态栏
    Image,  //图片
    TouchableOpacity,  //透明容器 做自定义按钮
    TextInput,  //输入框
    StyleSheet,  //ss样式对象
    ToastAndroid,
    Alert
} from 'react-native';
import { $fetch } from '../fetch';
const { width, height } = Dimensions.get('screen');
// rpx转物理像素
// 调用  100rpx  rpx(100)
const rpx = x => (width / 750) * x;

export default class LoginPage extends Component {
    state = {
        isPwd_active: false,
        NotPwd_active: false,
        unameText: "",
        csimage: "",
        isShowPwd: true,
        upwd: "",
        ...store.getState()
    }
    // 登录
    UserLogin = () => {
        // 获取redux的url
        let defaultURL = this.state.assestURL

        let uname = this.state.unameText
        let upwd = this.state.upwd
        let remember = this.state.NotPwd_active

        if (/^[\S]{4,10}$/.test(uname)) {
            if (/^[\S]{6,12}$/.test(upwd)) {
                // 验证成功,发送请求登录/注册
                $fetch(
                    '/user/ureg',
                    "POST", `uname=${uname}&upwd=${upwd}&remember=${remember}`,
                    (data) => {
                        if (data.ok) {
                            // 注册请求将清空输入
                            if (data.msg == "注册成功,请重新登陆") {
                                this.setState({ unameText: "", upwd: "" })
                            } else {

                                // 头像
                                this.setState({ avatar: `${defaultURL}/public/image/avatar/${data.avatar}` })
                                store.dispatch({ type: "updateAvatar", avatarimg: `${defaultURL}/public/image/avatar/${data.avatar}` });

                                // 名字
                                this.setState({ uname: data.uname })
                                store.dispatch({ type: "updateUame", uname: data.uname });

                                // 登录状态
                                this.setState({ isOkPwd: true })
                                store.dispatch({ type: "updateIsOkPwd", isOkPwd: true });

                                // 置空
                                this.setState({ unameText: "", upwd: "" })

                                // token
                                store.dispatch({ type: "updateToken", token: data.token });



                            }
                            Alert.alert(`${data.msg}`, "", [{ text: "ok" }], { cancelable: true })
                        } else {
                            Alert.alert(`${data.msg}`, "", [{ text: "ok" }], { cancelable: true })
                        }
                    }
                )
            } else {
                ToastAndroid.showWithGravityAndOffset(
                    "密码格式为6-12位",
                    ToastAndroid.SHORT,
                    ToastAndroid.CENTER,
                    25,
                    50
                );
            }
        } else {
            ToastAndroid.showWithGravityAndOffset(
                "用户名格式为4-10位",
                ToastAndroid.SHORT,
                ToastAndroid.CENTER,
                25,
                50
            );
        }

    }
    NotLogin = () => {
        // 登录状态
        this.setState({ isOkPwd: false })
        store.dispatch({ type: "updateIsOkPwd", isOkPwd: false });

        // 名字
        this.setState({ uname: "请先登录" })
        store.dispatch({ type: "updateUame", uname: "请先登录" });

        // 头像
        this.setState({ avatar: `${store.getState().assestURL}/public/image/avatar/default_avatar.png` })
        store.dispatch({ type: "updateAvatar", avatarimg: `${store.getState().assestURL}/public/image/avatar/default_avatar.png` });
        Alert.alert(`退出登录成功`, "", [{ text: "ok" }], { cancelable: true })
    }
    ChangeName = (text) => {
        this.setState({ unameText: text })

    }
    ChangePwd = (text) => {
        this.setState({ upwd: text })

    }
    render() {
        return (
            <View style={{ flex: 1, flexDirection: "column" }}>
                {/* 背景图 */}
                <ImageBackground
                    blurRadius={1}
                    source={require("../public/image/bg.jpg")}
                    style={{
                        width, height
                    }}
                >
                    {/* 状态栏沉浸 */}
                    <StatusBar
                        translucent
                        backgroundColor='transparent'
                    />

                    <View style={{ height: StatusBar.currentHeight }}></View>
                    {/* 用户头像 和姓名*/}
                    <View style={{ paddingHorizontal: rpx(50) }}>
                        <TouchableOpacity
                            onPres={() => { }}
                            style={{ height: rpx(180), width: rpx(180), borderRadius: 100, backgroundColor: "white", flexDirection: "row", justifyContent: 'center', alignItems: "center", marginHorizontal: (width / 2) - rpx(140), backgroundColor: "none" }}>
                            <Image style={{ height: "100%", width: "100%" }} source={{ uri: this.state.avatar }}
                            ></Image>
                        </TouchableOpacity>
                        {/* 用户昵称 */}
                        <View style={{ flexDirection: "row", justifyContent: "center", marginTop: rpx(40) }}>
                            <Text style={{ fontSize: rpx(40) }}>{this.state.uname}</Text>
                        </View>
                    </View>
                    {/* 主体部分 */}
                    <View style={[ss.content, { display: this.state.isOkPwd ? 'none' : 'flex' }]}>

                        <View style={[ss.area_input, { marginTop: rpx(40) }]}>
                            <Image style={ss.area_input_icon}
                                source={require("../public/image/user.png")}
                            ></Image>
                            <TextInput style={[ss.area_input_input, { flex: 1 }]}
                                placeholder="用户名"
                                placeholderTextColor="white"
                                onChangeText={this.ChangeName}
                                selectionColor="#D4237A"
                                value={this.state.unameText}
                            ></TextInput>
                        </View>

                        <View style={[ss.area_input, { marginTop: rpx(50) }]}>
                            <Image style={ss.area_input_icon}
                                source={require("../public/image/pwd.png")}
                            ></Image>
                            <TextInput style={[ss.area_input_input, { flex: 1 }]}
                                placeholder="输入密码"
                                placeholderTextColor="white"
                                onChangeText={this.ChangePwd}
                                selectionColor="#D4237A"
                                secureTextEntry={this.state.isShowPwd}
                                value={this.state.upwd}
                            ></TextInput>
                            {/* 右侧显示隐藏密码图标 */}
                            <TouchableOpacity onPress={() => { this.setState({ isShowPwd: !this.state.isShowPwd }) }}>
                                <Image style={ss.area_input_icon}
                                    source={
                                        this.state.isShowPwd ? require("../public/image/login/eye.png") : require("../public/image/login/eye-close.png")

                                    }></Image>
                            </TouchableOpacity>
                        </View>
                        <View style={{ marginTop: rpx(50), flexDirection: "row", justifyContent: "space-between" }}>
                            <View>
                                <TouchableOpacity style={{ flexDirection: "row", alignItems: "center" }} onPress={() => { }}>
                                    <Text style={ss.area_Btn}>未注册将自动注册</Text>
                                </TouchableOpacity >
                            </View>


                            <View>
                                <TouchableOpacity style={{ flexDirection: "row", alignItems: "center" }} onPress={() => this.setState({ NotPwd_active: !this.state.NotPwd_active })}>
                                    <Image source={this.state.NotPwd_active ? require("../public/image/check.png") : require("../public/image/uncheck.png")}
                                        style={{ width: rpx(40), height: rpx(40) }}
                                    ></Image>
                                    <Text style={ss.area_Btn}>记住密码</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        {/* 登录按钮 */}
                        <TouchableOpacity activeOpacity={0.7} style={ss.btn_login} onPress={this.UserLogin}>
                            <Text style={ss.btn_login_title}>登录</Text>
                        </TouchableOpacity>
                    </View>
                    {/* 登录成功后显示的区域 */}
                    <View style={{
                        display: this.state.isOkPwd ? 'flex' : 'none', flexDirection: "column", justifyContent: "center",
                        alignItems: "center",
                        marginTop: rpx(60)
                    }}>
                        <Text>欢迎你{this.state.uname}</Text>
                        <TouchableOpacity style={{
                            height: rpx(60),
                            backgroundColor: "#D4237A",
                            width: rpx(200),
                            borderRadius: rpx(50),
                            justifyContent: "center",
                            alignItems: "center",
                            marginTop: rpx(600)

                        }} onPress={this.NotLogin}>
                            <Text style={{ color: "white" }}>退出登录</Text>
                        </TouchableOpacity>
                    </View>
                </ImageBackground >
            </View >
        );

    }

}
const ss = StyleSheet.create({
    content: {
        paddingHorizontal: rpx(50),
    },
    area_input: {
        flexDirection: 'row',
        alignItems: 'center',
        alignContent: "center",
        backgroundColor: "rgba(0,0,0,0.4)",
        padding: rpx(10),
        borderRadius: rpx(10),
    },
    area_input_icon: {
        width: rpx(50),
        height: rpx(50),
        marginHorizontal: rpx(10)
    },
    area_input_input: {
        fontSize: rpx(34),
        color: "white"
    },
    area_Btn: {
        marginLeft: rpx(20),
        fontSize: rpx(30)
    },
    btn_login: {
        marginTop: rpx(20),
        backgroundColor: "skyblue",
        alignItems: 'center',
        borderRadius: rpx(50),
        backgroundColor: "#D4237A",
        paddingVertical: rpx(15)

    }, btn_login_title: {
        fontSize: rpx(40),
        color: "white"
    }, line: {
        height: 3,
        backgroundColor: 'pink',
        width: rpx(260)
    }
})